<template>
  <div class="app-container table-app-container">
    <div>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>出库申请</span>
          <el-button size="mini" style="float:right" @click="submit">提交</el-button>
          <el-button v-if="!code" size="mini" style="float:right" @click="start">确认</el-button>
          <el-button v-if="code" size="mini" style="float:right" @click="unDo">撤销</el-button>
        </div>
        <el-form ref="myform" :model="formItem" :rules="rules" label-width="120px">
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="标题" prop="name">
                <el-input v-model="formItem.name" placeholder="请输入标题" :disabled="code !== ''" />
              </el-form-item>
            </el-col>
            <el-col v-if="code" :span="24">
              <el-form-item label="工单号" prop="code">
                <el-input v-model="formItem.code" placeholder="请输入工单号" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="申请人" prop="applyUserName">
                <el-input v-model="formItem.applyUserName" placeholder="请输入申请人" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="申请时间" prop="createTime">
                <el-date-picker v-model="formItem.createTime" format="yyyy-MM-dd HH:mm:ss" type="date" placeholder="选择申请时间" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="使用人" prop="useUserName">
                <el-input v-model="formItem.useUserName" placeholder="请选择使用人">
                  <i slot="suffix" class="el-input__icon el-icon-s-custom" @click="handleUserIconClick" />
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="领用事由及用途" prop="reason">
                <el-input v-model="formItem.reason" placeholder="请输入领用事由及用途" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="出库资产">
                <el-button icon="el-icon-plus" @click="handleAssetClick">添加</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-table :data="formItem.assetList" size="mini" style="width: 100%">
                <el-table-column v-for="(item,index) in insideColumns" :key="index" :prop="item.key" :render="item.render" :label="item.title" width="80" />
                <el-table-column label="操作" align="center" width="80" fixed="right" class-name="small-padding fixed-width">
                  <template slot-scope="scope">
                    <el-button type="text" size="mini" icon="el-icon-delete" @click="remove(scope.$index)" />
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </el-form>
        <SelectDialog title="选择使用人" :append-to-body="true" :show="userSelDialogFormVisible" @on-ok="selectUserOk" @on-cancel="selectUserCancel">
          <UsersPage ref="usersTable" :for-selection="true" />
        </SelectDialog>
        <SelectDialog title="选择资产" :append-to-body="true" :show="assetSelDialogFormVisible" @on-ok="selectAssetOk" @on-cancel="selectAssetCancel">
          <FixedAsset ref="assetTable" :for-selection="true" />
        </SelectDialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import UsersPage from '@neu/auth-ui/views/users/tables'
import SelectDialog from '@neu/biz-core/components/SelectDialog'
import FixedAsset from '@neu/dcam-ui/views/fixedAsset/tables'
import { start, detail, submit, remove } from '@neu/dcam-ui/api/outboundProcess'
export default {
  name: 'CKSQ',
  components: {
    UsersPage,
    SelectDialog,
    FixedAsset
  },
  props: {
    processDefinitionId: {
      type: String,
      default: ''
    },
    code: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 用户弹窗
      userSelDialogFormVisible: false,
      // 资产的弹窗
      assetSelDialogFormVisible: false,
      formItem: {
        name: '',
        code: '',
        applyUserId: '',
        applyUserName: this.$store.getters.name,
        createTime: new Date(),
        useUserName: '',
        useUserId: '',
        assetList: [],
        reason: ''
      },
      // 表单验证规则
      rules: {
        name: [{
          required: true,
          message: '标题不能为空',
          trigger: 'blur'
        }],
        code: [{
          required: true,
          message: '工单号不能为空',
          trigger: 'blur'
        }],
        useUserName: [{
          required: true,
          message: '领用人不能为空',
          trigger: 'blur'
        }]
      },
      insideColumns: [
        { title: '状态', width: 60, key: 'statusDesc', display: true },
        { title: '来源', width: 60, key: 'sourceDesc', display: true },
        { title: '名称', width: 180, key: 'name', sortable: 'custom', display: true },
        { title: '编码', width: 200, key: 'code', sortable: 'custom', display: true },
        { title: '条码', width: 90, key: 'sequence', sortable: 'custom', display: true },
        { title: '位置', width: 60, key: 'locationName', display: true },
        { title: '类型', width: 60, key: 'assetTypeName', display: true },
        { title: '型号', width: 60, key: 'productName', display: true },
        { title: '计量单位', width: 100, key: 'measureUnit', sortable: 'custom', display: true },
        { title: '金额', width: 70, key: 'money', sortable: 'custom', display: true },
        { title: '使用部门', width: 100, key: 'orgName', sortable: 'custom', display: true },
        { title: '使用人', width: 90, key: 'userName', sortable: 'custom', display: true },
        { title: '使用期限（月）', width: 140, key: 'month', sortable: 'custom', display: true },
        { title: '供应商', width: 90, key: 'manufacturerName', display: true },
        { title: '供应商联系人', width: 130, key: 'manufacturerPerson', display: true },
        { title: '供应商联系电话', width: 140, key: 'manufacturerPhone', display: true },
        { title: '合同名称', width: 100, key: 'contractName', display: true },
        { title: '维保负责人', width: 120, key: 'maintenanceUserName', display: true },
        { title: '维保说明', width: 200, key: 'maintenanceNote', display: true }
      ]
    }
  },
  created() {
    if (this.code) {
      detail(this.code).then(res => {
        this.formItem = res.data
      })
    }
  },
  methods: {
    /** 选择用户按钮 */
    handleUserIconClick() {
      this.userSelDialogFormVisible = true
    },
    /** 用户选择OK */
    selectUserOk() {
      var users = this.$refs.usersTable.selections
      if (users.length > 1) {
        return this.$message({
          showClose: true,
          message: '只能选择一个用户',
          type: 'error'
        })
      }
      if (users.length < 1) {
        this.formItem.useUserId = ''
        this.formItem.useUserName = ''
      } else {
        this.formItem.useUserId = users[0].username
        this.formItem.useUserName = users[0].name ? users[0].name : users[0].username
      }
      this.userSelDialogFormVisible = false
    },
    /** 用户选择CANCEL */
    selectUserCancel() {
      this.userSelDialogFormVisible = false
    },
    /** 选择资产 */
    handleAssetClick() {
      this.assetSelDialogFormVisible = true
    },
    /** 用户资产OK */
    selectAssetOk() {
      var selections = this.$refs.assetTable.selections
      if (selections.length <= 0) {
        return this.$message({
          showClose: true,
          message: '请至少选择一个资产',
          type: 'error'
        })
      }
      this.formItem.assetList.push(...selections)
      this.assetSelDialogFormVisible = false
    },
    /** 用户资产CANCEL */
    selectAssetCancel() {
      this.assetSelDialogFormVisible = false
    },
    // 移除资产
    remove(index) {
      this.formItem.assetList.splice(index, 1)
    },
    // 确认
    start() {
      this.$refs.myform.validate((valid) => {
        if (valid) {
          this.$confirm('确定要申请此流程', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            start(this.processDefinitionId, false, this.formItem).then(res => {
              this.$message({
                type: 'success',
                message: '申请成功!'
              })
              this.$router.push({ name: 'dcam_todo' })
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消申请'
            })
          })
        }
      })
    },
    // 提交
    submit() {
      this.$refs.myform.validate((valid) => {
        if (valid) {
          this.$confirm('确定要提交此流程', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            if (this.code) {
              submit(this.code, this.formItem).then(res => {
                this.$message({
                  type: 'success',
                  message: '提交成功!'
                })
                this.$router.push({ name: 'dcam_todo' })
              })
            } else {
              start(this.processDefinitionId, true, this.formItem).then(res => {
                this.$message({
                  type: 'success',
                  message: '提交成功!'
                })
                this.$router.push({ name: 'dcam_todo' })
              })
            }
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消提交'
            })
          })
        }
      })
    },
    // 撤销流程
    unDo() {
      this.$confirm('确定要撤销此流程', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        remove(this.code).then(res => {
          this.$message({
            type: 'success',
            message: '撤销成功!'
          })
          this.$router.push({ name: 'dcam_todo' })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消撤销'
        })
      })
    }
  }
}
</script>
